<template>
    <div class="app">

        <navbar class="navbarb">  
            <navbar-item type="back"></navbar-item> 
            <navbar-item type="title">
                <text class="headtext">排名</text>
                
            </navbar-item>
            
        </navbar>
        <tabbar
                ref="reflectName"
                class="tabbar"
                :eeui="{ tabType: 'top' }"
                tabBackgroundColor="#ffffff"
                textUnselectColor="#666666"
                textSelectColor="#2fdc7e"
                textBold="2"
                textSize="30"
                >

            <!--页签①-->
            <tabbar-page ref="name_1"
                         :eeui="{ tabName: 'name_1', title:'个人榜',}">
                
                <div class="page-content">
                    <scroller class="scroller">
                        <div class="topimg">
                            <image src=""></image>
                            <text class="topTip">xxx占领了封面</text>
                        </div>
                    
                        <div class="listcont">
                            <div class="myself">
                                <div class="left">
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                    <div class="loveStar">
                                        <text class="num">0</text>
                                        <text class="xin">&#xe60f;</text>
                                    </div>
                                    
                                </div>
                                
                                
                            </div>

                            <div class="other">
                                <div class="left">
                                    <text class="nums">1</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                    <div class="loveStar">
                                        <text class="num">0</text>
                                        <text class="xin">&#xe60f;</text>
                                    </div>
                                    
                                </div>
                                
                                
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">2</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                    <div class="loveStar">
                                        <text class="num">0</text>
                                        <text class="xin">&#xe60f;</text>
                                    </div>
                                    
                                </div>
                                
                                
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">2</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                    <div class="loveStar">
                                        <text class="num">0</text>
                                        <text class="xin">&#xe60f;</text>
                                    </div>
                                    
                                </div>
                                
                                
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">2</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                    <div class="loveStar">
                                        <text class="num">0</text>
                                        <text class="xin">&#xe60f;</text>
                                    </div>
                                    
                                </div>
                                
                                
                            </div>
                            
                        </div>
                        
                    </scroller>
                </div>
            </tabbar-page>

            <!--页签②-->
            <tabbar-page ref="name_2"
                         :eeui="{ tabName: 'name_2', title:'院系榜',   }">
                
                <div class="page-content">
                    <scroller class="scroller">
                        <div class="topimg">
                            <image src=""></image>
                            <text class="topTip">xxx占领了封面</text>
                        </div>
                    
                        <div class="listcont2">
                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon">&#xe6f7;</text>
                                    <text class="yxName">数学</text>
                                    <div class="yxText">
                                        <text class="yxTit">数学与计算机学员</text>
                                        <text class="yxFtit">共有97人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div>  

                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon jbColor2">&#xe6f7;</text>
                                    <text class="yxName yxName1">机械</text>
                                    <div class="yxText">
                                        <text class="yxTit">机械与动力工程学院</text>
                                        <text class="yxFtit">共有97人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div> 
                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon jbColor3">&#xe6f7;</text>
                                    <text class="yxName yxName2">电子</text>
                                    <div class="yxText">
                                        <text class="yxTit">电子与信息工程学院</text>
                                        <text class="yxFtit">共有120人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div> 
                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon jbtext">4</text>
                                    <text class="yxName yxName3">航海</text>
                                    <div class="yxText">
                                        <text class="yxTit">航海学院</text>
                                        <text class="yxFtit">共有120人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div> 
                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon jbtext">5</text>
                                    <text class="yxName yxName4">中歌</text>
                                    <div class="yxText">
                                        <text class="yxTit">中歌艺术学院</text>
                                        <text class="yxFtit">共有120人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div> 
                            <div class="yxItem">
                                <div class="left">
                                    <text class="jbIcon jbtext">6</text>
                                    <text class="yxName yxName3">中歌</text>
                                    <div class="yxText">
                                        <text class="yxTit">中歌艺术学院</text>
                                        <text class="yxFtit">共有120人参与</text>
                                    </div>
                                </div>    
                                <text class="righttext">2.26公里/人</text>    
                            </div> 
                        </div>
                        
                    </scroller>
                </div>
            </tabbar-page>

            <!--页签③-->
            <tabbar-page ref="name_3"
                         :eeui="{ tabName: 'name_3', title:'作弊榜', }">
                
                <div class="page-content">
                    <scroller class="scroller">
                        <div class="topimg">
                            <image src=""></image>
                            <text class="topTip">xxx占领了封面</text>
                        </div>
                    
                        <div class="listcont">
                            <!-- <div class="myself">
                                <div class="left">
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                   
                                    
                                </div>
                                
                                
                            </div> -->

                            <div class="other">
                                <div class="left">
                                    <text class="nums">1</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right" >
                                    <text class="stepNum">12300</text>
                                    <text class="pnum">公里</text>
                                    
                                </div>
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">2</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>  
                                    <text class="pnum">公里</text>  
                                </div>
                                
                                
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">3</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                   <text class="pnum">公里</text>
                                    
                                </div>
                                
                                
                            </div>
                            <div class="other">
                                <div class="left">
                                    <text class="nums">4</text>
                                    <image class="avator" src="../../assets/images/avator.png" style="width:80;height:80;margin-left:25;"></image>
                                    <div class="myName">
                                        <text class="name">拉不卡死</text>
                                        <text class="rank">第12名</text>
                                    </div>
                                </div>
                                <div class="right">
                                    <text class="stepNum">12300</text>
                                   <text class="pnum">公里</text>
                                    
                                </div>
                                
                                
                            </div>
                            
                        </div>
                        
                    </scroller>
                </div>
            </tabbar-page>

            

        </tabbar>
    </div>
</template>
<script>
const eeui = app.requireModule('eeui');
export default {
    data () {
        return {
            
        }
    },
    methods: {
        
    },
    created(){
        // 添加 字体图标
        let domModule = weex.requireModule('dom');
        domModule.addRule('fontFace',{
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_1628280_20y85spf0gci.ttf')"
        })

        
    }
}
</script>
<style scoped>
.navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
     .headtext {
        font-size: 30px;
        color: #ffffff;
    }
    .iconr {
        width: 100px;
        height: 100px;
        color: #ffffff;
    }

    .tabbar {
        width: 750px;
        flex: 1;
    }

    .page-content {
        width: 750px;
        position: relative;
    }

    .content-text {
        font-size: 24px;
    }

    .page-navbar {
        width: 750px;
        height: 90px;
    }

    .page-navbar-title {
        color: #ffffff;
        font-size: 28px;
    }

    
    .topimg{
        width: 750;
        height: 600;
        background-color: #333;
        
       
    }
    .topTip{
        font-size: 36;
        text-align: center;
        color: #999;
        margin-top: 20;
        
    }
    .scroller{
       position: relative;
      
        
    }
    .listcont{
       background-color: #eaeaea;
     
    }
    .avator{
        margin-left: 70;
    }
    .myself{
        height: 120;
        background-color: #ffffff;
        margin-bottom: 20;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .other{
       height: 120;
        background-color: #ffffff;
        flex-direction: row;
        align-items: center; 
        justify-content: space-between;
        
    }
    .left{
        flex-direction: row;
        align-items: center;
    }
    .right{
        flex-direction: row;
        align-items: center;
        margin-right: 40;
    }
    .myName{
        margin-left: 10;
    }
    .name{
        font-size: 26;
        margin-bottom: 10;
    }
    .rank{
        font-size: 24;
        color: #999;
    }
    .stepNum{
        font-size: 55;
        color: #1eb76e;
    }
    .loveStar{
        margin-left: 20;
        width: 40;
        height: 120;
        align-items: center;
    }
    .num{
        text-align: center;
        font-size: 24;
        color: #999;
        margin-top: 28;
        margin-bottom: 10;
    }
    .xin{
        font-family: iconfont;
        font-size: 30;
        color: #999;
        
    }
    .nums{
       margin-top: 20;
       margin-left: 30;
       font-size: 35;
        color: #666;
    }
    .yxItem{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 120;
        margin-left: 0;
        margin-right: 30;
    
    }
    .jbIcon{
        font-family: iconfont;
        font-size: 50;
        color: #e4e019;  
        width: 80;
        text-align: center;
    }
    .yxName{
        width: 70;
        height: 70;
        text-align: center;
        line-height: 70;
        background-color: #d36120;
        color: #fff;
        border-radius: 80;
        font-size: 22;
        margin-right: 20;
    }
    .yxTit{
        font-size: 26;
        color: #333;
    }
    .yxFtit{
        font-size: 22;
        color: #999;
        margin-top:5;
    }
    .righttext{
        font-size: 26;
        color: #333;
    }
    .yxName1{
        background-color: #d32c20;
    }
    .yxName2{
        background-color: #243fd6;
    }
    .yxName3{
        background-color: #24cad6;
    }
    .yxName4{
        background-color: #ac24d6;
    }
    .jbtext{
        font-size: 30;
        color: #20a9b3;
    }
    .jbColor2{
        color: #20a9b3;
    }
    .jbColor3{
        color: #b34f20;
    }
   .pnum{
        font-size: 28;
        margin-left: 10;
        color: #666;
    }
    

</style>